import React from "react";
import { Menu, Layout } from "antd";
import { useHistory } from "react-router-dom";
const { Sider, Header } = Layout;
const { SubMenu } = Menu;
import {
  PieChartOutlined,
  DesktopOutlined,
  MailOutlined,
} from "@ant-design/icons";

import Logo from "../../assets/images/home/logo.png";
import LogoShort from "../../assets/images/home/logo-short.png";
export default function Sidebar(props) {
  const history = useHistory();
  function menuItemClick({domEvent,key}): void {
    history.push(key,{title: domEvent.target.innerText});
  }
  return (
    <Sider collapsible collapsed={props.collapsed} trigger={null}>
      <Header style={{width: props.collapsed ? 80: 200,padding:'0 20px'}}>
        {props.collapsed ? <img width="40" src={LogoShort} /> : <img src={Logo} />}
      </Header>
      <Menu
        defaultSelectedKeys={["/overview"]}
        mode="inline"
        theme="dark"
        onClick={menuItemClick}
      >
        <Menu.Item key="/overview" icon={<PieChartOutlined />} style={{marginTop: 0}}>
          概览
        </Menu.Item>
        <SubMenu key="2" icon={<MailOutlined />} title="人员">
          <Menu.Item key="/staff">人员</Menu.Item>
          <Menu.Item key="/depart">部门</Menu.Item>
          <Menu.Item key="/jurisdiction">权限</Menu.Item>
        </SubMenu>
        <Menu.Item key="/device" icon={<DesktopOutlined />}>
          设备
        </Menu.Item>
      </Menu>
    </Sider>
  );
}
